<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">产业园区</span>
        <span class="banner-main__subtitle" style="line-height:28px">
            云计算、人工智能等新兴科技与传统行业的迅速融合，催生了产业转型和创新。<br/>
            作为服务实体的产业园区通过自身的数字化转型，也逐渐成为区域性新兴产业的服务平台，提供更加智能化、标准化的产业服务。</span>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">行业趋势</h1>
        <h6 class="model-desc">Industry Trend</h6>
        <div class="card">
          <div style="display:flex">
            <div style="font-size:14px;line-height:20px;margin-right:10px">
                <span style="font-size:16px;font-weight:bold">商业地产发展逐步智慧化，科技、空间以人为本</span><br/>
                产业园区正在向产城融合、运营服务化发展，产业与城市融合发展；以城市为基础，承载产业空间和发展产业经济。由同类型企业的聚合向完整产业链的汇聚转变，园区产业综合性更强<br/>
                <br/>

               <span style="font-size:16px;font-weight:bold">新技术的快速发展，成为地产行业转型的外在推动力量</span><br/>
                我们正处于一个前所未有的技术创新时期，5G、物联网、大数据、人工智能、VR/AR、移动互联等多种新技术的叠加效应引领产业变革<br/>
                <br/>

                <span style="font-size:16px;font-weight:bold">数字化生产已逐步成为普遍模式</span><br/>
                数字化生产模式以数据为处理对象，以ICT平台为生产工具，以软件为载体，以服务为目的的生产过程<br/>
                <br/>

                <span style="font-size:16px;font-weight:bold">数字化技术和平台，使得“服务、体验、成本”三要素有可能同时做到最优</span><br/>
                给机器以智能，给服务以平台，利用数字技术开展数字化转型，企业可能同时做到服务好+体验优+运作成本低<br/>
            </div>
            <div align="center"><img src="@/assets/industryArea1.jpg" width="600px" /></div>
         </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案业务架构</h1>
        <h6 class="model-desc">Scheme business architecture</h6>
        <Streamer>
          <p style="line-height: 28px; font-size: 14px;">
            产业园区解决方案大致分为产业招商、企业服务、运营管理、人文社区四大部分。
            <br />
            产业招商:培育产业发展，带动经济发展是首要任务，如何更好地帮助园区招商，促进产业发展，是园区智慧化升级过程中要考虑的首要需求。通过构建智慧招商、产业分析应用，可以为园区招商与产业分析提供信息化支撑<br />
                - 智慧招商：有效管理园区招商全过程，帮助园区实现招商工作从项目洽谈到投产经营全过程的科学化管理，使园区招商管理与服务有效结合、相辅相成<br />
                - 产业分析：及时掌握园企的发展情况，构建企业信息库来实现园企信息管理与服务，打造企业全生命周期动态库<br />
            企业服务:以产业园内企业发展为出发点，整合多方企业服务资源，构建园区企业服务，为园区企业输出优质服务，构建园区良好的营商环境，促进企业及产业发展<br/>
                - 物业服务：物业服务在线办理，企业可以全程跟踪，保障服务质量，提升园区服务满意度<br/>
                - 资源服务：在线预定公共资源，如会议室、办公设备、保洁、场地等，提高公共资源利用率，降低企业办公成本<br/>
                - 企业工作台：提供线上管理操作门户，用于处理企业与园区运营方及员工相关的工作，扩展企业服务维度，减少企业跑腿时间<br/>
            运营管理:提供对园区和企业的管理平台，并为管理方提供日常办公和跨部门协作的服务能力，使园区运营工作实现全面信息化和移动化<br/>
                - 智慧办公：提高园区各部门业务协作能力，梳理园区各部门工作流程，实现园区运营管理和企业服务等业务的全面协作与管理<br/>
                - 综合安防：通过视频AI技术，实现园区人、车、物智能化管理。整合智能设备数据，形成智能设备态势分析<br/>
            人文社区:以人为本，围绕公众在园区的工作生活需求，提供优质服务，提高公众在园的幸福感、安全感。以服务公众促进企业发展，以企业发展带动产业升级<br/>
                - 舒适生活：通过智慧食堂、在线班车、园区一卡通等服务，提升园区生活配套服务的便利性，提升园区生活工作体验
                - 和谐人文：用户通过服务平台接收园区资讯、参与园区话题讨论、了解最新活动，营造开放共享的活力园区文化
          </p>
        </Streamer>
        <img style="margin: 20px auto 0px; display: block;" src="@/assets/mind1.png" width="515px" height="227px" />
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案技术架构</h1>
        <h6 class="model-desc">Scheme Technology Architecture</h6>
        <div class="card">
          <div align="center"><img src="@/assets/industryArea.svg" width="862px" /></div><br />
          <span class="description">
            智慧产业园区解决方案以智慧园区数字平台为核心，采用端、边、云协同架构，通过智能运营中心管理平台，实现园区数据全融合、状态全可视、业务全可管、事件全可控。同时结合产业园区四大体系应用，实现产业、管理、服务高质量发展，推进智慧产业园区建设。<br />
            1、北向应用服务层：提供产业发展、企业服务、运营管理、人文社区四大应用服务体系；<br/>
            2、园区平台服务层：园区数字平台是智慧园区解决方案的核心，基于华为云智能视频分析、数据湖运营平台、ROMA平台等，达成汇聚公共能力、支撑上层业务能力、支撑水平业务扩展能力的目标；<br/>
            3、网络联接层：园区通信网包括园区办公网、视频专网、物联网、全WiFi、运营商通信网等；<br/>
            4、园区南向终端层：改造和接入已有的设备、子系统，实现园区子系统数据融合及协同高效运营；<br/>
          </span>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">客户案例</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <div class="card-box">
            <b style="font-weight:bold">上海徐汇西岸传媒港</b><br />
            上海徐汇西岸传媒港以文化传媒和信息通讯产业为核心，容纳整个产业链环节，是上海中心城区内最具公共活力的滨水新城区。<br/>
            华为通过构建统一的数字平台，实现传媒港一体化运营管理和服务，打造活力、绿色、智慧的文化传媒新地标，赋能徐汇西岸引领全球人工智能新浪潮。
          </div>
          <!-- <div class="card-box">
            <b style="font-weight:bold">2、 中冶集团</b><br />
            帮助中冶集团将门户网站、部分二级单位的OA、邮件等业务系统迁移至中冶云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">3、 华讯方舟</b><br />
            助力华讯方舟的数据中心,以及合作的电信运营商,完成大量的业务系统迁移。
          </div>   -->
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Streamer from '@/components/Streamer/Streamer'
export default {
  components: {
    Streamer
  },
  data () {
    return {
      list: [
        [
          { icon: require('@/assets/icon_02.png'), title: '智慧招商规范招商流程，统筹招商成果，实现精准管控；通过建链、补链、强链优化产业结构，促进产业发展智慧招商规范招商流程，统筹招商成果，实现精准管控；通过建链、补链、强链优化产业结构，促进产业发展' }
        ],
        [
          { icon: require('@/assets/icon_04.png'), title: '服务作业效率提升10%；服务评价可量化、可视化；设备可用性提高10%；设备故障及时发现率提升50%' }
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '响应时间由7.5分钟降到2分钟；处置效率提升50%；事件事后处置变事前预防、事中处置；实现一个中心，管理全局事件' },
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '一个平台提供运营服务、企业服务、公众服务；智慧考勤、车辆自助通行方便快捷；访客办理由5分钟缩短到1分钟' },
        ],
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/bg1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
